import { convertImgUrl } from "@/utils/MyFun";
import { formateDate } from "@/utils/common";
import { Icon } from "@iconify/react";
import { Col, Row } from "antd";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  margin-bottom: 5rem;
  width: 100%;
  header {
    font-size: 5rem;
    font-weight: 650;
    display: flex;
    align-items: center;
  }
  a {
    color: #fff;
  }
  .box {
    width: 100%;
    height: 50rem;
    position: relative;
    background-color: rgba(0, 0, 0, 1);
    overflow: hidden;
    &:hover {
      img {
        transform: scale(1.1);
      }
      .info {
        font-size: 5rem;
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.4;
      transition: all 600ms;
    }
    .info {
      transition: all 600ms;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
  }
`;

const Recommend = ({ recommendArticle = [] }) => {
  return (
    <>
      {recommendArticle.length !== 0 ? (
        <Styled>
          {/* 存在数据就展示 */}
          <header>
            <Icon icon="twemoji:thumbs-up" />
            &nbsp;&nbsp; 相关推荐
          </header>
          <Row gutter={6}>
            {recommendArticle.map((item) => {
              return (
                <Col span={8} key={item.id}>
                  <Link to={`/article/${item.id}`}>
                    <div className="box">
                      <img src={convertImgUrl(item.img)} alt="" />
                      <div className="info">
                        <p className="flex align-center">
                          <Icon icon="fluent-mdl2:date-time-12" />
                          {formateDate(item.created_at)}
                        </p>
                        <p>{item.title}</p>
                      </div>
                    </div>
                  </Link>
                </Col>
              );
            })}
          </Row>
        </Styled>
      ) : null}
    </>
  );
};

export default Recommend;
